<template>
  <div class="activity-management">
    <h2>活动管理</h2>
    <button @click="addActivity">添加活动</button>
    <ul>
      <li v-for="activity in activities" :key="activity.id">
        {{ activity.title }} - {{ activity.date }}
        <button @click="editActivity(activity)">编辑</button>
        <button @click="deleteActivity(activity.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activities: [
        { id: 1, title: '校运会', date: '2023-10-01' },
        { id: 2, title: '科技节', date: '2023-11-15' }
      ]
    };
  },
  methods: {
    addActivity() {
      const newActivity = {
        id: this.activities.length + 1,
        title: '新活动',
        date: new Date().toISOString().split('T')[0]
      };
      this.activities.push(newActivity);
    },
    editActivity(activity) {
      const index = this.activities.findIndex(a => a.id === activity.id);
      if (index !== -1) {
        this.activities[index].title = prompt('请输入新的活动名称', activity.title);
        this.activities[index].date = prompt('请输入新的活动日期', activity.date);
      }
    },
    deleteActivity(id) {
      this.activities = this.activities.filter(a => a.id !== id);
    }
  }
};
</script>